<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>元素框模型</title>
    <style>
        div .pad {
            border-style: solid;
            padding: 10px;
        }

        p.a {/*class为a的p标签，才有效*/
            border-style: solid dotted dashed double;
            border-color: red; /*边框的颜色*/
            padding: 10px; /*内边距*/
            margin:20px;/*如果不指定外边距，那么会有一个默认的外边距，外边距*/
        }
        p.b{/*class 为b的p标签，才有效*/
            border-style: solid;
            border-color: green; /*边框的颜色*/
            padding: 10px; /*内边距*/
            margin:10px;/*如果不指定外边距，那么会有一个默认的外边距，外边距*/
        }
    </style>
</head>
<body>

<div>
    <h1 class="pad">有内边距</h1>
    <h1>无内边距</h1>
</div>

<div>
    <h1>无内边距</h1>
    <h1>无内边距</h1>
</div>

<p class="a">
    我是有边框的,我的边框是有颜色的。我没有手动指定外边距
</p>

<p class="b">
    我是有边框的,我的边框是有颜色的。
</p>
<p>

</p>
</body>
</html>
